<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="isOpen"
    append-to-body
    @close="handleClose"
    width="75%"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="6">
          <!-- <ImageUpload v-model="form.avatarUrl" :limit="1"></ImageUpload> -->
          <div style="display: flex; justify-content: center">
            <ImagePreview :src="form.avatarUrl" width="150px"></ImagePreview>
          </div>

          <el-row>
            <el-col :span="24">
              <div class="flex flex-wrap justify-center">
                <span class="mr-10 mt-10">
                  <dict-tag
                    :options="dict.type.biz_personnel_type"
                    :value="form.personnelTypeDict"
                  />
                </span>

                <span class="mr-10 mt-10">
                  <dict-tag
                    :options="dict.type.biz_civil_servant_political_landscape"
                    :value="form.politicalLandscapeDict"
                  />
                </span>
                <span class="mr-10 mt-10">
                  <dict-tag
                    :options="dict.type.biz_civil_servant_work_nature"
                    :value="form.workNatureDict"
                  />
                </span>
                <span class="mr-10 mt-10">
                  <dict-tag
                    :options="dict.type.biz_civil_servant_position"
                    :value="form.positionDict"
                  />
                </span>
              </div>

              <!-- <el-form-item label="类别" prop="personnelTypeDict">
                <dict-tag :options="dict.type.biz_personnel_type" :value="form.personnelTypeDict" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="职务" prop="positionDict">
                <dict-tag :options="dict.type.biz_civil_servant_position" :value="form.positionDict" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="岗位" prop="postDict">
                <dict-tag :options="dict.type.biz_civil_servant_post" :value="form.postDict" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="职级" prop="rankDict">
                <dict-tag :options="dict.type.biz_civil_servant_rank" :value="form.rankDict" />
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <span>{{ form.name || " -" }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属部门" prop="deptId">
                <span>{{ form.deptName || " -" }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="sexDict">
                <dict-tag
                  :options="dict.type.sys_user_sex"
                  :value="form.sexDict"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birthday">
                <span>{{ form.birthday || " -" }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="身份证号" prop="identityCard">
                <span>{{ form.identityCard || ' -' }}</span>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <span>{{ form.phone || " -" }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否纳入绩效管理" prop="assessmentMark">
                <span>{{ form.assessmentMark ? "是" : "否" }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="特殊情况" prop="specialSituationDict">
                <!-- <dict-tag :options="dict.type.biz_civil_servant_special_situation" :value="form.specialSituationDict" /> -->
                <span>{{ form.remarks || " -" }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <div class="title">
          <div><i class="el-icon-document"></i> 干部履历</div>
        </div>
        <el-table border style="width: 100%" :data="personalCareersTable">
          <el-table-column label="序号" type="index" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            align="center"
          ></el-table-column>
          <el-table-column prop="type" label="变动" align="center">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.biz_personal_career_type"
                :value="scope.row.type"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="内容"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="remarks"
            label="备注"
            align="center"
          ></el-table-column>
        </el-table>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from "@/api/organization/civil-servant";
import ImageUpload from "@/components/ImageUpload";
import ImagePreview from "@/components/ImagePreview";
import { list as careersList } from "@/api/organization/civil-servant/careers.js";
export default {
  name: "civil-servant-edit",
  dicts: [
    "biz_personnel_type",
    "sys_user_sex",
    "biz_civil_servant_post",
    "biz_civil_servant_special_situation",
    "biz_civil_servant_position",
    "biz_civil_servant_rank",
    "biz_civil_servant_political_landscape",
    "biz_civil_servant_work_nature",
    "biz_personal_career_type",
  ],
  components: { ImageUpload, ImagePreview },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      personalCareersTable: [],
      form: {
        id: "",
        avatarUrl: "",
        deptId: undefined,
        deptName: undefined,
        name: undefined,
        identityCard: undefined,
        avatarUrl: undefined,
        phone: undefined,
        sexDict: undefined,
        birthday: undefined,
        assessmentMark: undefined,
        personnelTypeDict: undefined,
        postDict: undefined,
        positionDict: undefined,
        rankDict: undefined,
        specialSituationDict: undefined,
        orderNum: undefined,
        remarks: undefined,
      },
      title: "用户详情",
      isOpen: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.isOpen = val;
        if (val) {
          this.title = `[ ${this.params.name} ]详细信息`;
          this.getDetail();
        }
      },
    },
  },
  methods: {
    getCareersList() {
      careersList({ civilServantId: this.form.id }).then((res) => {
        this.personalCareersTable = res.rows;
      });
    },
    getDetail() {
      detail({ id: this.params.id }).then((res) => {
        let { data } = res;
        ({ ...this.form } = data);
        this.getCareersList();
      });
    },
    // 关闭弹框
    handleClose() {
      this.reset();
      this.$emit("update:visible", false);
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        name: undefined,
        name: undefined,
        password: undefined,
        phone: undefined,
        email: undefined,
        sex: undefined,
        personnelTypeDict: "0",
        remark: undefined,
      };
      this.resetForm("form");
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0;
  color: #409eff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
